<template>

    <div class="common-layout">
        <!-- 页面整体布局 -->
        <el-container>
            <el-header style="padding: 0 0">
                <nav id="nav">
                    <div>
                        <h1>
                            <a href="/">
                                <div class="logo">王者荣耀</div>
                            </a>
                        </h1>
                        <ul>
                            <li><a href="/">官网首页</a><em>HOME</em></li>
                            <li><a href="/yxjs">游戏介绍</a><em>DATA</em></li>
                            <li><a href="/yxgl">游戏攻略</a><em>STRATEGY</em></li>
                            <li><a href="/wzyyt">王者音乐听</a><em>MUSIC</em></li>
                            <li><a href="/yxbz">游戏壁纸</a><em>WALLPAPER</em></li>
                            <li><a href="/djhj">对局环境</a><em>CONFRONTATION</em></li>
                        </ul>
                    </div>
                </nav>
            </el-header>
            <!--页中news-->
            <el-main class="main" style="">
                <!-- 轮播图与新闻简讯 -->
                <div class="news">
                    <div class="news_all">
                        <el-container class="news_main">
                            <el-aside width="500px" style="height: 344px;">
                                <!-- 轮播图片组件 -->
                                <el-carousel style="width: 500px; margin: 0 auto;" trigger="click">
                                    <el-carousel-item>
                                        <img src="carousel1.jpeg" style="width: 100%;height: 100%">
                                    </el-carousel-item>
                                    <el-carousel-item>
                                        <img src="carousel2.jpeg" style="width: 100%;height: 100%">
                                    </el-carousel-item>
                                    <el-carousel-item>
                                        <img src="carousel3.jpeg" style="width: 100%;height: 100%">
                                    </el-carousel-item>
                                    <el-carousel-item>
                                        <img src="carousel4.jpeg" style="width: 100%;height: 100%">
                                    </el-carousel-item>
                                </el-carousel>
                                <!-- 新闻简讯 -->
                                <div class="lbwz">
                                    <a href="" class="lbwz1" style="font-size: 10px;">AG冠军赛季巡礼</a>
                                    <a href="" class="lbwz1" style="font-size: 10px;">SNK新皮肤爆料</a>
                                    <a href="" class="lbwz1" style="font-size: 10px;">一诺冬冠宣传片</a>
                                    <a href="" class="lbwz1" style="font-size: 10px;">虎扑KPL红榜</a>
                                    <a href="" class="lbwz1" style="font-size: 10px;">总决赛MVP老帅</a>
                                </div>
                            </el-aside>
                            <el-container style="width: 312px;height: 344px">
                                <el-header style="padding: 0 0;width: 312px;height: 48px">
                                    <div class="lbwz2">
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">热门</a>
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">公告</a>
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">赛事</a>
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">新闻</a>
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">活动</a>
                                        <a href="#" class="lbwz2-1" style="font-size: 10px;">...</a>
                                    </div>
                                </el-header>
                                <el-main class="news2_main" style="padding: 0 0;width: 312px;height: 48px">
                                    <div>
                                        <ul class="news2_nr">
                                            <p class="news2_nrbt">
                                                <a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438220">【已开服】1月2日抢先服“强者之路”版本更新公告</a>
                                            </p>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438216">抢先服新赛季更新
                                                新版本福利等你来拿</a><em class="em">01/01</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438609">1月6日体验服停机更新公告</a><em
                                                    class="em">01/06</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438567">1月6日全服不停机更新公告</a><em
                                                    class="em">01/06</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438414">1月4日体验服停机更新公告</a><em
                                                    class="em">01/04</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438364">1月3日抢先服不停机更新公告</a><em
                                                    class="em">01/03</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438351">1月3日体验服停机更新公告</a><em
                                                    class="em">01/03</em></li>
                                            <li><a href="https://pvp.qq.com/web201706/newsdetail.shtml?tid=438331">五岳皮肤研发全纪实丨鼠年限定首曝，还原五岳东方之美</a><em
                                                    class="em">01/02</em></li>
                                        </ul>
                                    </div>
                                </el-main>
                            </el-container>
                            <el-container>
                                <el-main class="news3_main">
                                    <div class="news3"></div>
                                </el-main>
                            </el-container>
                        </el-container>
                        <div class="news1"></div>
                    </div>
                    <!-- 分类推荐 -->
                    <div>
                        <ul class="spjs" style="margin-top: 50px;margin-bottom: 20px">
                            <li v-for="c in cc"><a href="#" :class="c.p">{{ c.name }}</a></li>
                        </ul>
                    </div>
                </div>
            </el-main>

            <div class="spbf">
                <div style="position: relative;margin: 0 auto;top: 400px; width: 1048px;">
                    <el-row :gutter="10">
                        <el-col :span="6" v-for="p in imgArr" style="margin:10px 0">
                            <el-card body-style="margin:0;padding:0" shadow="hover">
                                <img class="spbf_img" :src="p.url" style="width: 100%; height:100%;">
                                <div style="background-color: rgba(0,0,0,0.5);margin: 0 0;position: relative;bottom: 28px">
                                    <el-icon size="20px" style="position: relative;right:45px;color: white;top: 3px">
                                        <VideoPlay/>
                                    </el-icon>
                                    <span style="position: relative;right:40px;color: white;line-height: 21.33px">{{
                                        p.l
                                        }}</span>
                                    <span style="position:relative;left: 45px;color: white;line-height: 21.33px">{{
                                        p.d
                                        }}</span>
                                </div>
                                <br>
                                <p style="font-size: 15px;margin: 0 0;position: relative;bottom: 25px">{{ p.title }}</p>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <!-- 页脚区域开始 -->
            <el-footer>
                <div class="footer1">
                    <!-- 页脚左侧部分，包含游戏开发商的logo链接 -->
                    <div class="footers">
                        <a href="https://ieg.tencent.com/" target="_blank" class="footer_logo1"></a>
                        <a href="https://timi.qq.com/" target="_blank" class="footer_logo2"></a>
                    </div>
                    <!-- 温馨提示区域，包括游戏适龄提示和健康游戏忠告 -->
                    <div class="tip1">
                        <p style="color: #333;font-weight: bold;text-align: left">
                            温馨提示：本游戏适合16岁(含)以上玩家娱乐</p>
                        <p style="text-align: left;font-size: 12px;margin-top: 10px">
                            <em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
                        </p>
                        <p class="tip_1" style="text-align: left;font-size: 12px;margin-top: 10px">
                            《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
                    </div>
                    <!-- 版权信息区域 -->
                    <div class="tip2">
                        <p style="font-weight: bold; margin: auto auto;"><img src="../../public/weiname.png" alt=""></p>
                    </div>
                </div>
            </el-footer>
            <!-- 页脚区域结束 -->
        </el-container>
    </div>

</template>

<script setup>
import {ref} from "vue";

// 用于循环展示分类信息的数据
const showSubmenu = ref(false)
const cc = ref([
    {p: "an1", name: '王者视角'},
    {p: "an2", name: '峡谷情报局'},
    {p: "an2", name: '王者克制论'},
    {p: "an2", name: '百星王者带你飞'},
    {p: "an2", name: '棋高一招'},
    {p: "an2", name: '国服观影路'},
]);
const imgArr = ref([
    {url: 'sptp1.jpg', title: '峡谷重案组第4季 第3集 古卷失踪案（下）', l: '34.5万', d: '2024-01-03'},
    {url: 'sptp2.jpg', title: '【棋高一招】第八期：铁血硬汉不服来战！曹操大表哥力荐上分套路', l: '2.1万', d: '2024-01-09'},
    {url: 'sptp3.jpg', title: '【王者克制论】增益型辅助太暴力？李九教你完美克制增益型辅助', l: '9.3万', d: '2024-02-03'},
    {url: 'sptp4.jpg', title: '【百星王者带你飞】122期：版本强势中单武则天', l: '532.8万', d: '2024-03-03'},
    {
        url: 'sptp5.jpg',
        title: '【棋高一招】第七期：巾帼不让须眉!牙膏带你领略女选手的进阶之路',
        l: '2.8万',
        d: '2024-04-03'
    },
    {url: 'sptp6.jpg', title: '峡谷重案第4季 第2集 失踪的古卷（上）', l: '58.2万', d: '2024-04-13'},
    {url: 'sptp7.jpg', title: '【百星王者带你飞】第121期：来无影去无踪，辅王鬼谷养成记', l: '553.7万', d: '2024-05-03'},
    {url: 'sptp8.jpg', title: '【王者克制论】无伤越塔太凶悍？李九教你完美克制芈月', l: '15.7万', d: '2024-05-18'}
])
</script>

<style scoped>
/*@import url(../assets/css/ys1.css);*/
/*@import url(../assets/css/wztb.css);*/
/*@import url(../assets/css/wzwb.css);*/
* {
    margin: 0; /*外边距为0*/
    padding: 0; /*内边距为0*/
}

ul {
    list-style: outside none none;
}

a {
    text-decoration: none;
}

/*.news div:not(.spbf){*/
/*    display: block;*/
/*}*/
.news div {
    display: block;
}

/*.news1{*/
/*    display: block;*/
/*}*/


/*body{*/
/*    margin:0 0;*/
/*    padding:0 0;*/
/*    border:0*/
/*}*/
.common-layout {
    background: url(../assets/img/background/home_background.png) no-repeat  center center;
    width: 100%;
    background-size: cover;
    height: 100%;
    position: absolute;
    z-index: -1;
    /*background-size: 100% 100%;*/
    /*margin: 0 0;*/
}

.main {
    margin: 0 auto;
    position: relative;
    top: 400px;
}

/*导航栏样式*/
#nav {
    width: 100%;
    height: 84px;
    background-color: #323235;
    opacity: 0.8;
}

#nav > div {
    width: 1200px;
    height: 84px;
    margin: 0 auto;
}

#nav > div > h1 {
    width: 240px;
    height: 84px;

    text-indent: -9999px;
    float: left;
}

.logo {
    position: relative;
    left: 62px;
    top: 16px;
    background: url(../assets/img/wzkj/logo.png) no-repeat;
    width: 200px;
    height: 54px;
    text-indent: -9999px;
    transition: 0.3s;
}
.logo:hover{
    transform: scale(1.1);
}

#nav > div > ul {
    width: 660px;
    line-height: 84px;
    float: left;
    position: relative;
    left: 50px;
}

#nav > div > ul > li {
    float: left;
    width: 110px;
    height: 84px;
    text-align: center;
}

#nav > div > ul > li > a {
    display: block;
    width: 110px;
    height: 64px;
    padding: 20px 0 0;
    color: #c9c9dd;
    font-size: 18px;
    line-height: 30px;
    transition: 0.3s;
}

#nav > div > ul > li > em {
    display: block;
    margin-top: -30px;
    font-size: 12px;
    line-height: 16px;
    color: #858792;
    font-style: normal;
}

#nav > div > ul > li > a:hover {
    /*background-color: #61544c;*/
    background: url(../assets/img/wzkj/hover.png) center bottom no-repeat;
}

#nav > div > h1 > a {
    display: block;
    position: relative;
}

.lbwz1 {
    float: left;
    /*display: inline-block;*/
    width: 100px;
    height: 44px;
    line-height: 44px;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer; /*鼠标形状*/
    text-align: center;
    color: #b1b2be;
    background-color: #2c2d34;
}

/* 设置鼠标悬停时的标题样式 */
.news_all div a:hover {
    font-size: 14px;
    background-color: #61544c; /* 背景色 */
    color: #d6b77e; /* 文字颜色 */
}

/* 设置新闻2的标题样式 */
.lbwz2-1 {
    float: left;
    /*display: inline-block;*/
    width: 52px;
    height: 48px;
    line-height: 44px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer; /*鼠标形状*/
    text-align: center;
    color: #b1b2be;
    background-color: #2c2d34;
}

.news2_main {
    background-color: #2c2d34;
}

.news2_nr {
    float: left; /* 左浮动 */
    height: 100%;
    width: 312px;
    /*margin-top: -10px;*/ /* 预留注释，原本设置上边距为负值 */
    /*display: block;*/ /* 预留注释，原本设置显示为块级元素 */
}

/* 设置新闻2内部文章标题的样式 */
.news2_nrbt {
    width: 100%; /* 宽度 */
    line-height: 36px; /* 行高 */
    padding: 0 0; /* 内边距 */
    margin-top: 1px; /* 上边距 */
    text-align: center; /* 文字居中 */
    background: #414046; /* 背景色 */
    /*text-overflow: ellipsis;*//* 预留注释，原本设置文本溢出用省略号表示 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    margin-bottom: 13px; /* 下边距 */
}

/* 设置新闻2文章标题链接的样式 */
.news2_nrbt a {
    color: #f3c258; /* 文字颜色 */
    font-size: 14px; /* 字体大小 */

}

/* 设置新闻2文章标题链接鼠标悬停时的样式 */
.news2_nrbt a:hover {
    text-decoration: underline; /* 下划线 */
    font-size: 13px; /* 字体大小 */
}

/* 设置新闻2文章列表项的样式 */
.news2_nr li {
    /*margin-bottom: 11px; !* 下边距 *!*/
    overflow: hidden; /* 隐藏超出部分 */
    background: #414046; /* 背景色 */
    margin: 0 0 0 0;
    text-align: left;
    line-height: 35px;
    padding-left: 10px;
}

/* 设置新闻2文章列表项链接的样式 */
.news2_nr li a {
    width: 270px; /* 宽度 */
    color: #b8b9c5; /* 文字颜色 */
    font-size: 10px; /* 字体大小 */
    text-overflow: ellipsis; /* 文本溢出用省略号表示 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    float: left; /* 左浮动 */
}

/* 设置新闻2文章列表项链接鼠标悬停时的样式 */
.news2_nr li a:hover {
    text-decoration: underline; /* 下划线 */
    font-size: 10px;
}

/* 设置新闻2中的字体样式 */
.em {
    font-size: 10px; /* 字体大小 */
    color: #999; /* 文字颜色 */
    float: right; /* 右浮动 */
    font-style: normal; /* 字体样式正常 */
    margin-right: 5px;
}

/*news3布局*/
.news3_main {
    margin: 0 0;
    padding: 0 0;
    background-color: #2c2d34;
}

.news3 {
    width: 236px; /* 宽度 */
    height: 344px; /* 高度 */
    /*background-color: yellow;*/ /* 预留注释，原本设置背景颜色为黄色 */
    position: relative; /* 相对定位 */
    /*float: left; !* 左浮动 *!*/
    background-image: url('../assets/img/gwsy/xz.png'); /* 背景图片 */
}

/* 设置图片展示区域简介的样式 */
.spjs {
    float: left; /* 左浮动 */
    width: 890px; /* 宽度 */
    line-height: 26px; /* 行高 */
    border: none;
    /*display: block;*/ /* 预留注释，原本设置为块级元素 */
}

/* 设置图片展示简介的列表项样式 */
.spjs li {
    float: left; /* 左浮动 */
    /*width: 110px;*/ /* 预留注释，原本设置宽度 */
    text-align: center; /* 文字居中 */
    margin-left: 8px; /* 左侧外边距 */
}

/* 定义一个按钮类样式 */
.spjs .an1 {
    display: block; /* 显示为块级元素 */
    border-color: #f3c258; /* 边框颜色 */
    background: #f3c258; /* 背景颜色 */
    color: #fff; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    line-height: 24px; /* 行高 */
    padding: 0 13px 0 8px; /* 内边距 */
    /*border: 1px solid #e5e5e5; !* 边框宽度和颜色 *!*/
    border-radius: 10px; /* 圆角 */
}

/* 按钮1注释 */
/* 设置按钮1的鼠标悬停样式 */
.an1:hover {
    background-color: #f5f5f5; /* 鼠标悬停时的背景颜色 */
    color: #333; /* 鼠标悬停时的文字颜色 */
}

/* 定义另一个按钮类样式 */
.an2 {
    display: block; /* 显示为块级元素 */
    border-color: #f3c258; /* 边框颜色 */
    background: #f5f5f5; /* 背景颜色 */
    color: #333; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    line-height: 24px; /* 行高 */
    padding: 0 13px 0 8px; /* 内边距 */
    border: 1px solid #e5e5e5; /* 边框宽度和颜色 */
    border-radius: 10px; /* 圆角 */
}

/* 设置按钮2的鼠标悬停样式 */
.an2:hover {
    background-color: #f3c258; /* 鼠标悬停时的背景颜色 */
    color: #fff; /* 鼠标悬停时的文字颜色 */
}

.spbf_img {
    transition: 0.5s;
}

.spbf_img:hover {
    transform: scale(1.2);
}

footer {
    height: 362px;
    background: url("../assets/img/wzkj/wb.jpg") no-repeat center 0;
    position: relative;
    top: 500px;
}


.footer1 {
    margin: 0 auto;
    position: relative;
    background: none;
    width: 1200px;
    padding-top: 80px;
}


#footer2 {

    padding: 0;
}


.footers {
    display: block;
    float: none;
    height: 66px;
    padding-bottom: 10px;
    margin-bottom: 32px;
    border-bottom: 2px solid #d4d4d4;
}


.footers a {
    display: block;
    float: left;
}


.footer_logo1,
.footer_logo2 {
    display: inline-block;
}

.footer_logo1 {
    width: 285px;
    height: 64px;
    margin: 0;
    background: url("../assets/img/wzkj/spr.png") no-repeat;
}

.footer_logo2 {
    width: 70px;
    height: 64px;
    margin: 0;
    background: url("../assets/img/wzkj/spr.png") no-repeat -285px 0;
}


.tip1, .tip2 {
    position: absolute;
    font-size: 16px;
    color: #666;
    float: left;
}

.tip1 {
    left: 0;
    top: 170px;
    width: 508px;
}

.tip1 em {
    font-style: normal;
    margin-right: 16px;
    color: #6d6d6d;
}

.tip_1 {
    font-size: 16px;
    color: #666;
    margin-top: 6px;
}

.tip2 {
    left: 520px;
    top: 140px;
    width: 508px;
}
</style>
